<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head th:include="common/Head :: headCss">

</head>
<div>


    <!--
     <link href="../bootstrap/js/project/sys/shop/css/datatables.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    -->

    <link href="../bootstrap/js/project/sys/shop/css/fileinput.min.css" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="../bootstrap/dataTable/datatables.min.css"/>


    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        .table > thead:first-child > tr:first-child > th {
            text-align: center;
        }
    </style>
</div>
<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg">
        <div th:include="common/Head :: head"></div>
        <div class="wrapper wrapper-content animated fadeInRight" v-show="showList">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">Config option 1</a>
                                    </li>
                                    <li><a href="#">Config option 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="table-responsive">
                                <div class="grid-btn">
                                    <a class="btn btn-primary" style="margin-bottom:0" href="/activiti/create" target="_blank"><i
                                            class="fa fa-plus"></i>&nbsp;新建</a>
                                    <!--<a class="btn btn-primary" onclick="openCreate();"><i class="fa fa-plus" ></i>&nbsp;新建流程</a>-->
                                    <a class="btn btn-primary" style="margin-bottom:0" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;发布
                                    </a>
                                    <a class="btn btn-primary" style="margin-bottom:0" onclick="importModel()"><i class="fa fa-arrow-circle-o-down"></i>&nbsp;导入
                                    </a>
                                </div>
                                <table class="table table-striped table-bordered table-hover dataTables-example" style="width: 100%" >
                                    <thead>
                                    <tr>
                                        <th style="width: 30px!important"></th>
                                        <th style="width: 60px!important">版本</th>
                                        <th style="width: 45%">流程名称</th>
                                        <th style="width: 90px!important">发布状态</th>
                                        <th style="width: 90px!important">创建时间</th>
                                        <th style="width:175px!important">操作</th>
                                        <th style="display: none"></th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        导入流程模型弹出层-->
        <div class="layui-container" style="display: none; width: 300px" id="uploadLayout">
            <div class="layui-upload" style="margin-top: 30px;">
                <div class="layui-row" style="text-align: center">
                    <div class="layui-col-md12">
                        <button type="button" class="layui-btn layui-btn-normal" id="pick">选择文件(可多选)</button>
                    </div>
                </div>
                <div class="layui-row" style="margin-top: 30px;text-align: center;">
                    <div class="layui-col-md12">
                        <button type="button" class="layui-btn layui-btn-sm" id="upload">上传并导入</button>
                    </div>
                </div>

            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> 星记云典 Company &copy; 2014-2017
            </div>
        </div>

    </div>
</div>
<div th:include="common/Head :: js"></div>

<script src="../bootstrap/js/dept/js/vue.min.js"></script>


<script src="../bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="../js/manage/js/fileinput.min.js"></script>
<script src="../js/manage/js/zh.js"></script>
<script src="../js/manage/js/processData.js"></script>


<script src="../ztree/jquery.ztree.all.min.js"></script>
<script src="../ztree/jquery.ztree.exhide.js"></script>
<script src="../bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="../bootstrap/js/dept/js/jquery.treegrid.min.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.bootstrap3.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.extension.js"></script>
<script src="../bootstrap/js/dept/js/tree.table.js"></script>

<script src="../bootstrap/js/user/js/Roleztree.js"></script>


<script type="text/javascript" src="../bootstrap/dataTable/datatables.min.js"></script>

<script type="text/html" id="rowToolbarTpl">
    <button shiro:hasPermission="app:flow:test" class="btn btn-danger btn-xs btn-outline" style="margin-bottom:0" onclick="test([test_deploymentId])"></i>测试</button>
    <button class="btn btn-primary btn-xs btn-outline" style="margin-bottom:0" onclick="start('[start_deploymentId]')"></i>启动</button>
    <a class="btn btn-primary btn-xs btn-outline" style="margin-bottom:0"  href="/process-editor/modeler.html?modelId=[edit_id]" target="_blank"></i>修改</a>
    <button class="btn btn-primary btn-xs btn-outline"  style="margin-bottom:0" onclick="exports([exports_id])"></i>导出</button>
</script>

<!-- Page-Level Scripts -->
<script type="text/javascript">

    function start(deploymentId) {
        if (deploymentId) {   // 流程已发布，直接打开页面
            window.open("/activiti/start?deploymentId=" + deploymentId);
        } else { // 流程未发布，提示发布
            alert('此流程未发布');
        }
    }

    function test(deploymentId) {
        if (deploymentId) {
            window.open("/activiti/test/process/" + deploymentId);
        } else {
            alert('请先发布流程后测试');
        }
    }

    //导出
    function exports(id) {
        modelId=id;
        if (modelId && modelId !== 'null') {   // 已导出
            window.open("/activiti/export/model/" + modelId);
        } else { // 流程未发布，提示发布
            alert('导出失败');
        }
    }
    var idx;
    layui.use('upload', function () {
        var $ = layui.jquery
            ,upload = layui.upload;
        //选完文件后不自动上传
        upload.render({
            elem: '#pick'
            ,url: '/activiti/import/model'
            ,auto: false
            ,accept: 'file'
            ,multiple: true
            ,bindAction: '#upload'
            ,done: function(r){
                if (r.Status === 0) {
                    layer.open({
                        type: 0,
                        content: '导入成功'
                    });
                    layer.close(idx);
                    tableReload()
                } else {
                    layer.open({
                        type: 0,
                        content: '导入失败：' + r.msg
                    });
                }
            }
        });

    });
    function tableReload() {
        var table = $('.dataTables-example').DataTable();
        table.ajax.reload();
    }
    function importModel() {
        idx = layer.open({
            type: 1,
            title: '选择需要导入的流程模型JSON',
            resize: true,
            fixed: true,
            shadeClose: true,
            shade: 0.1,
            scrollbar: false,
            area: ['400px', '250px'],
            content: $('#uploadLayout'),
            /*btn: ['上传并导入'],
            end: function (index) {
                console.log('index', index);
            }*/
        });
    }

    var data;

    $(document).ready(function () {
        yuheUtils.bindPersonalSetting();
        var trs ;

        $("#flow").attr("class", "active");
        $("#approvalProcess_ul").attr("class", "nav nav-second-level collapse in");

        $("#process").attr("class", "active");

        // 初始化表格dataTable。一般只传ajax（数据）、columns（列）、aoColumnDefs（列格式化操作，若无不需要）
        yuheUtils.initDataTable('.dataTables-example', {
            ajax: {
                url: "/activiti/modelList",
                dataSrc: function (json) {
                    var date = new Date();
                    console.log(date);
                    list=json.modelList;
                    $.each(list,function(n,value) {
                        trs= value.deploymentId;
                        createTime =value.createTime;
                    });
                    return list;
                }
            },
            columns: [
                {data: null, orderable: false},
                {data: "revision"},
                {data: "name"},
                {data: "deploymentId"},
                {data: "createTime"},
                {data: "a"}

            ],
            aoColumnDefs: [
                {
                    "render": function (data, type) {
                        return "<div align='center'><input type='radio'   name='radio' value='" + data.id + "' ></div>";
                    },
                    "aTargets": 0 //第一列
                },
                {
                    "render": function (data, type, row) {
                        trs = row.deploymentId != null ? '已发布' : '未发布' ;
                        return "<div align='center'><span >"+ trs +"</span></div>";
                    },
                    "aTargets": 3 //第一列
                },
                {
                    "render": function (data, type, row) {
                        data=row.createTime;
                        if (data != undefined && data != 'undefined') {
                            return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
                        } else {
                            return '';
                        }
                    },
                    "aTargets": 4 //第一列
                },
                {
                    "render": function (data, type, row) {
                        return $('#rowToolbarTpl').html()
                            .replace('[test_deploymentId]', "'" + row.deploymentId + "'")
                            .replace('[exports_id]', "'" + row.id + "'")
                            .replace('[start_deploymentId]', row.deploymentId)
                            .replace('[edit_id]', row.id);
                    },
                    "aTargets": 5 //第一列
                }
            ]
        });

    });
    //对Date 类进行扩展
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    // $(function () {
    //
    // })

    $(function () {
        var $thisA = $('a[href="/activiti/ProcessManagement"]');
        $thisA.parent().attr("class", "active");
        $thisA.parent().parent().attr("class", "nav nav-second-level collapse in");
    });
</script>

</body>

</html>
